<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import type { UploadProps } from 'element-plus'
import emitter from '@/utils/emitter';
import type { tagForm, courseForm } from '@/api/type'
import { updateCourse, createCourse } from '@/api/course';
import { useUserStore } from '@/stores/user';
import { useTokenStore } from '@/stores/token';
import { usePointStore } from '@/stores/point';
// 接收course传递的关闭抽屉的方法closeDrawer
let props = defineProps(['closeDrawer', 'thisCourse']);
// let PointStore = usePointStore();
let tags = ref<tagForm[]>(); //标签数据
tags.value = usePointStore().tag;

const userStore = useUserStore();
//新增课程信息
let course = ref<courseForm>({
    userid: userStore.userInfo.id,
})
if (props.thisCourse) {
    course.value = Object.assign({}, props.thisCourse);
}
//绑定DOM对象用于提交图片upload
const uploadRef = ref()
function submit() {
    ElMessageBox.confirm(`确认提交吗？`)
        .then(async () => {
            if (props.thisCourse) {
                let result = await updateCourse(course.value);
                ElMessage.success(result.data)
            }
            else {
                console.log("获取了:", course.value);
                let result = await createCourse(course.value);
                console.log(result);
                ElMessage.success(result.data)
            }
            emitter.emit('refresh-course');
            props.closeDrawer();
        })
        .catch(() => {
            console.error();
            // catch error
        })
}
const imageUrl = ref("")
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
) => {
    imageUrl.value = response.data;
    course.value.courseImg = response.data;
}
</script>
<template>
    <el-form-item label="上传课程封面" label-width="80px" style="padding-left: 12px;">
        <el-upload ref="uploadRef" action="/api/course/upload" list-type="picture-card" :auto-upload="true"
            :headers="{ Authorization: useTokenStore().token }" accept="image/jpg,image/jpeg,image/png"
            :on-success="handleAvatarSuccess">
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
    </el-form-item>

    <el-form>
        <el-row>
            <el-col :span="12">
                <el-form-item label="课程名称" label-width="80px">
                    <el-input v-model="course.courseName" style="width: 240px" placeholder="Please input" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="所属标签" label-width="80px">
                    <el-select v-model="course.tagId" placeholder="Select" style="width: 240px">
                        <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="课程专业" label-width="80px">
                    <el-input v-model="course.major" style="width: 240px" placeholder="Please input" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="班级名称" label-width="80px">
                    <el-input v-model="course.className" style="width: 240px" placeholder="Please input" clearable />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="课程简介" label-width="80px">
            <el-input type="textarea" v-model="course.introduction" placeholder="Please input" clearable />
        </el-form-item>

        <el-button type="primary" @click="submit">提交</el-button>
    </el-form>
</template>

<style scoped>
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
